<template>
  <div class="header">
    <router-link tag="div" class="header-button" v-show="show" to="/">
      <span class="iconfont">&#xe667;</span>
    </router-link>
    <div class="header-fixed" v-show="!show" :style="opacityStyle">
      <router-link tag="div" class="header-left" to="/">
        <span class="iconfont">&#xe667;</span>
      </router-link>
      <p class="title">景点详情</p>
    </div>
  </div>
</template>

<script>
  export default {
    name: "header",
  data() {
      return {
        show:true,
        opacityStyle:{
          opacity:0
        }
      }
  },
    methods:{
      handleOpacity() {
        console.log('haha0');
        let top = document.documentElement.scrollTop

        if (top > 60) {
          let opacity = top/140
          opacity = opacity > 1 ? 1:opacity
          this.opacityStyle = {
            opacity:opacity
          }
          this.show = false
        } else  {
          this.show = true

        }
      }
    },
    activated() {
      window.addEventListener("scroll", this.handleOpacity) //这里的回调函数必须定义在 methods 中,否则不会生效
    },
    deactivated() {
      window.removeEventListener("scroll", this.handleOpacity)
    }
  }
</script>

<style lang="stylus" scoped>
  @import '~css/common.styl'

  .header
    .header-button
      position: absolute
      top: .2rem
      left: .2rem
      width: .8rem
      height: .8rem
      line-height: .8rem
      background-color: #000
      border-radius: .4rem
      text-align: center
      color: #fff
    .header-fixed
      position: fixed
      top:0
      left:0
      width:100%
      height: .86rem
      line-height: .86rem
      background-color: $bgColor
      color: #fff
      .header-left
        width:.64rem
        float:left
        .iconfont
          font-size: .4rem
          padding-left: .12rem
      .title
        width:1.5rem
        height:.86rem
        margin:0 auto
</style>
